<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<button nz-button nzType="primary" nzShape="circle" style="float: right; margin: 15px;" (click)="clearProject()">
  <i nz-icon nzType="close" nzTheme="outline"></i>
</button>
<br />
<h1 style="margin-left: 30px;">Create New Project</h1>
<div style="padding-left: 100px; padding-right: 100px;">
  <nz-steps [nzCurrent]="current">
    <nz-step nzTitle="Basic Information"></nz-step>
    <nz-step nzTitle="Initial Project"></nz-step>
    <nz-step nzTitle="Preview project"></nz-step>
  </nz-steps>
</div>

<div [ngSwitch]="current">
  <div *ngSwitchCase="0">
    <form #f="ngForm">
      <br />
      <div>
        <label class="form-label">
          <span class="red-star">*</span>
          Project Name:
        </label>
        <input
          type="text"
          id="username"
          class="form-control"
          [(ngModel)]="newProjectContent.projectName"
          name="username"
          required
        />
      </div>
      <div>
        <label class="form-label">
          <span class="red-star">*</span>
          Description:
        </label>
        <textarea
          rows="6"
          class="form-control"
          name="projectDescription"
          [(ngModel)]="newProjectContent.description"
          required
        ></textarea>
      </div>
      <div>
        <label class="form-label">
          <span class="red-star">*</span>
          Visibility:
        </label>
        <nz-radio-group name="visibility" [(ngModel)]="newProjectContent.visibility">
          <label class="darkLabel" nz-radio nzValue="PROJECT_VISIBILITY_PRIVATE">
            Private - Only project collaborators can view or edit the project.
          </label>
          <label class="darkLabel" nz-radio nzValue="PROJECT_VISIBILITY_TEAM">
            Team - All members of the team can view the project.
          </label>
          <div *ngIf="newProjectContent.visibility === 'PROJECT_VISIBILITY_TEAM'">
            <nz-select
              [(ngModel)]="newProjectContent.team"
              name="team"
              nzAllowClear
              nzPlaceHolder="Choose"
              style="margin-top: 10px;"
            >
              <nz-option *ngFor="let team of teams" [nzValue]="team" [nzLabel]="team"></nz-option>
            </nz-select>
          </div>
          <label class="darkLabel" nz-radio nzValue="PROJECT_VISIBILITY_PUBLIC">
            Public - All authenticated users can view the project.
          </label>
        </nz-radio-group>
      </div>
      <div
        *ngIf="
          newProjectContent.visibility === 'PROJECT_VISIBILITY_TEAM' ||
          newProjectContent.visibility === 'PROJECT_VISIBILITY_PUBLIC'
        "
      >
        <label class="form-label">
          <span class="red-star">*</span>
          Permission:
        </label>
        <nz-radio-group name="permission" [(ngModel)]="newProjectContent.permission">
          <label class="darkLabel" nz-radio nzValue="PROJECT_PERMISSION_VIEW">
            Can View - All members can view the project.
          </label>
          <label class="darkLabel" nz-radio nzValue="PROJECT_PERMISSION_EDIT">
            Can Edit - All members can edit the project.
          </label>
          <label class="darkLabel" nz-radio nzValue="PROJECT_PERMISSION_EXECUTE">
            Can Execute - All members can execute the project.
          </label>
        </nz-radio-group>
      </div>
    </form>
    <div class="centerDiv">
      <br />
      <button
        style="margin-bottom: 10px;"
        nz-button
        nzType="primary"
        [disabled]="!f.valid || !isVisibilityFilled()"
        (click)="current = current + 1"
      >
        Next Step
      </button>
    </div>
  </div>
  <div style="margin: 20px;" *ngSwitchCase="1">
    <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" [(nzSelectedIndex)]="initialState">
      <nz-tab [nzTitle]="blank">
        <div class="newBlank">
          <h3 style="padding-top: 130px;">Create a blank project</h3>
        </div>
      </nz-tab>
      <ng-template #blank>
        <i nz-icon nzType="file" nzTheme="outline"></i>
        Blank
      </ng-template>

      <nz-tab [nzTitle]="template">
        <nz-table #rowSelectionTable [nzPageSize]="5" [nzData]="Templates">
          <thead>
            <tr>
              <th [(nzChecked)]="isAllDisplayDataChecked" [nzIndeterminate]="isIndeterminate"></th>
              <th>Type</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of rowSelectionTable.data">
              <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshCheck(data)"></td>
              <td>{{ data.type }}</td>
              <td>{{ data.desciption }}</td>
            </tr>
          </tbody>
        </nz-table>
      </nz-tab>
      <ng-template #template>
        <i nz-icon nzType="database" nzTheme="outline"></i>
        Template
      </ng-template>

      <nz-tab [nzTitle]="upload">
        <div id="newUpload">
          <nz-upload
            nzType="drag"
            [nzMultiple]="true"
            [nzLimit]="0"
            nzAction="https://jsonplaceholder.typicode.com/posts/"
            (nzChange)="handleChange($event)"
          >
            <p class="ant-upload-drag-icon">
              <i nz-icon nzType="inbox"></i>
            </p>
            <p class="ant-upload-text">Click or drag file to this area to upload</p>
            <p class="ant-upload-hint">
              Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files
            </p>
          </nz-upload>
        </div>
      </nz-tab>
      <ng-template #upload>
        <i nz-icon nzType="to-top" nzTheme="outline"></i>
        Upload
      </ng-template>
      <nz-tab [nzTitle]="github" [nzDisabled]="true">upload</nz-tab>
      <ng-template #github>
        <i nz-icon nzType="github" nzTheme="outline"></i>
        Git Repo
      </ng-template>
    </nz-tabset>

    <div class="centerDiv">
      <br *ngIf="initialState !== 1" />
      <button
        style="margin-right: 5px; margin-bottom: 10px;"
        nz-button
        nzType="default"
        (click)="current = current - 1"
      >
        Previous Step
      </button>
      <button
        style="margin-left: 5px; margin-bottom: 10px;"
        nz-button
        nzType="primary"
        [disabled]="initialState === 1 && !templateType"
        (click)="current = current + 1"
      >
        Next Step
      </button>
    </div>
  </div>
  <div *ngSwitchCase="2">
    <h3 style="margin: 30px; color: rgb(82, 82, 82);"><strong>Project Files</strong></h3>
    <nz-table
      style="margin: 30px;"
      nzBordered
      #basicTable
      [nzData]="newProjectContent.files"
      [nzNoResult]="'No data record'"
    >
      <thead>
        <tr>
          <th nzWidth="300px">Name</th>
          <th nzWidth="40px">Size(KB)</th>
          <th nzWidth="80px">Last Modified</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td>{{ data.name }}</td>
          <td>{{ data.size / 1024 }}</td>
          <td>{{ data.lastModifiedDate }}</td>
        </tr>
      </tbody>
    </nz-table>
    <div class="centerDiv">
      <br />
      <button nz-button nzType="default" (click)="current = current - 1" style="margin-bottom: 10px;">
        Previous Step
      </button>
      <button
        nz-button
        nzType="primary"
        (click)="done()"
        style="margin-bottom: 10px; margin-right: 10px; margin-left: 10px;"
      >
        Save
      </button>
      <button nz-button nzType="primary" (click)="openNotebook()" [disabled]="true" style="margin-bottom: 10px;">
        Open in Notebook
      </button>
    </div>
  </div>
</div>
